<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">

            <div class="layui-card">
                <!--<div class="layui-card-header">树型</div>-->
                <div class="layui-card-body">
                    <div id="test"></div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use('tree', function(){
        var tree = layui.tree;

        //渲染
        var test = tree.render({
            elem: '#test'  //绑定元素
            ,showCheckbox: true
            ,data: [{
                title: '江西' //一级菜单
                ,spread: true
                ,children: [{
                    title: '南昌' //二级菜单
                    ,spread: true
                    ,children: [{
                        title: '高新区' //三级菜单
                        ,spread: true
                        //…… //以此类推，可无限层级
                    }]
                }]
            },{
                title: '陕西' //一级菜单
                ,spread: true
                ,children: [{
                    title: '西安' //二级菜单
                    ,spread: true
                }]
            }]
        });
    });
</script>
</body>
</html>